<template>
  <div class="app-container">
    <!-- 头部 -->
    <div class="searchBox">
      <el-form
        label-position="right"
        label-width="150px"
        :model="search"
        ref="searchForm"
        class="searchBox-content"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="事项类型：" prop="appCode">
              <el-select filterable v-model="search.appCode">
                <el-option
                  v-for="item in controlData.appOptions"
                  :key="item.appCode"
                  :label="item.appName"
                  :value="item.appCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事项标题：" prop="instanceTitle">
              <el-input v-model="search.instanceTitle" placeholder="请输入" class="content-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button style="margin-left: -100px" type="primary" @click="searchQuery">查询</el-button>
              <el-button
                type="info"
                @click="
              search = {};
              searchQuery();
            "
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发送人：" prop="senderName">
              <el-input v-model="search.senderName" placeholder="请输入" class="content-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接收时间：" prop="startTime">
              <el-date-picker
                v-model="time"
                @change="pickerChange"
                type="daterange"
                range-separator="→"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                class="content-picker"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表单 -->
    <qm-table
      :data="query"
      :showOrder="false"
      :menuOptions="{ width: 60 }"
      :showToolbar="false"
      ref="qmTable"
    >
      <qm-table-column field="readTime" width="60px" align="center">
        <template v-slot:content="{ row }">
          <span>
            <template v-if="row.readTime">
              <i class="far fa-envelope-open" title="已读"></i>
            </template>
            <template v-else>
              <i class="fas fa-envelope" title="未读"></i>
            </template>
          </span>
        </template>
      </qm-table-column>
      <qm-table-column field="alertStatus" width="100px" align="center">
        状态
        <template v-slot:content="{ row }">
          <span>
            <template v-if="row.alertStatus == 'redLevel'">
              <i class="iconfont icon-yuandianxiao red" title="超时告警"></i>
              超时告警
            </template>
            <template v-else-if="row.alertStatus == 'yellowLevel'">
              <i class="iconfont icon-yuandianxiao yellow" title="超时提醒"></i>
              超时提醒
            </template>
            <template v-else>
              <i class="iconfont icon-yuandianxiao green" title="正常"></i>
              正常
            </template>
          </span>
        </template>
      </qm-table-column>
      <qm-table-column field="appName">事项类型</qm-table-column>
      <qm-table-column field="instanceTitle">事项标题</qm-table-column>
      <qm-table-column field="taskName">当前环节</qm-table-column>
      <qm-table-column field="startTime" fieldType="datetime" width="180px">接收时间</qm-table-column>
      <qm-table-column field="senderName" width="100px">发送人</qm-table-column>

      <template v-slot:toolbar>
        <el-button
          type="primary"
          style="font-size: 14px; border-radius: 4px;margin-left:10px"
          @click="batchTask('batchRun')"
        >批量发送</el-button>
        <el-button
          style="font-size: 14px; color: #61677a; border-radius: 4px"
          @click="batchTask('batchBackward')"
        >批量退回</el-button>
      </template>
      <template v-slot:moreBtn="{ row }">
        <!-- <el-button type="text" @click="link(row)">办理</el-button> -->
        <el-button type="text" @click="open(row)">办理</el-button>
      </template>
    </qm-table>

    <qm-workflow-select-user
      v-model="dialogFormVisible"
      :url="selectUserUrl"
      :params="models"
      :needChoose="isNeedChoose"
      @select-done="selectDone"
      @cancel="dialogFormVisible = false"
    ></qm-workflow-select-user>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";
import QmWorkflowSelectUser from "@/libs/components/qm-workflow-select-user";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: "/workflow/toDoList/query",
    };
    this.urls.model = "/workflow/toDoList/getListModel";
  }

  mixin() {
    return {
      components: {
        QmWorkflowSelectUser,
      },
      data() {
        return {
          dialogFormVisible: false,
          selectComment: null,
          commentList: null,
          comment: null,
          taskIds: [],
          appCode: null,
          isNeedChoose: null,
          batchRunOrBackward: null,
          selectUserUrl: "",
          params: {},
          time: [],
        };
      },
      methods: {
        pickerChange(e) {
          // 赋值请求时间
          this.search.startTime = e[0];
          this.search.endTime = e[1];
        },
        link(row) {
          this.getWorkflowArgs({ taskId: row.taskId }).then((rlt) => {
            if (rlt && rlt.appUrl && rlt.appCode) {
              window.open(
                `${rlt.appUrl}?action=processEdit&taskId=${
                  row.taskId
                }&assigneeId=${row.assigneeId}&appCode=${rlt.appCode}&version=${
                  rlt.version
                }&_r=${new Date().getTime()}`
              );
            } else {
              this.notifyError("无法获取应用的处理地址");
            }
          });
        },
        open(row) {
          this.getWorkflowArgs({ taskId: row.taskId }).then((rlt) => {
            if (rlt && rlt.appUrl && rlt.appCode) {
              this.$root.openModal(
                `${rlt.appUrl}?action=processEdit&taskId=${
                  row.taskId
                }&assigneeId=${row.assigneeId}&appCode=${rlt.appCode}&version=${
                  rlt.version
                }&_r=${new Date().getTime()}`,
                () => {
                  this.searchQuery();
                }
              );
            } else {
              this.notifyError("无法获取应用的处理地址");
            }
          });
        },
        batchTask(batchRunOrBackward) {
          let source = this.$refs["qmTable"].getSelectedRows();
          if (!source || source.length == 0) {
            this.notifyError("请勾选需要办理的任务");
            return;
          }
          this.taskIds = [];
          for (let item of source) {
            this.taskIds.push(item.taskId);
          }

          request({
            url: "/workflow/toDoList/checkTask",
            method: "post",
            data: { taskIds: this.taskIds.toString() },
          })
            .then((r) => {
              if (r && r.success) {
                this.batchRunOrBackward = batchRunOrBackward;
                this.appCode = r.parameters.appCode;

                if (batchRunOrBackward === "batchRun") {
                  this.isNeedChoose = r.parameters.isNeedChoose;
                  if (this.isNeedChoose) {
                    let url = "/workflow/demoLeaveApply/selectUser";
                    url = url + "?appCode=" + this.appCode;
                    url = url + "&taskId=" + this.taskIds[0] || "";
                    url = url + "&assigneeId=";

                    this.selectUserUrl = url;
                    this.params = { pageAction: "edit" };
                  }
                }
                this.dialogFormVisible = true;
              } else {
                this.notifyError(r.message || "请求失败，请稍后再试");
              }
            })
            .catch((e) => {
              this.notifyError("请求失败，请稍后再试");
            });
        },
        selectDone({ choices, selectComment, sendComment }) {
          this.dialogFormVisible = false;
          let url = "/workflow/demoLeaveApply/" + this.batchRunOrBackward;
          let postModel = {};
          postModel.workflowComment = sendComment;
          if (this.isNeedChoose) {
            postModel.choice = choices[0];
          }

          request({
            url: url,
            method: "post",
            data: {
              appCode: this.appCode,
              taskIdList: this.taskIds.toString(),
              ...postModel,
            },
          })
            .then((r) => {
              if (r && r.success === true) {
                let msg = r.message || "发送成功";

                //提示下一步处理人
                if (this.batchRunOrBackward == "batchRun") {
                  if (r.parameters.nextHandlers) {
                    msg =
                      msg +
                      "<br/>下一步处理人：" +
                      r.parameters.nextHandlers.join(",");
                  }
                  if (msg) {
                    this.notifySuccess(msg);
                  }
                } else {
                  this.notifySuccess("回退成功");
                }
              } else {
                let msg = r.message || "发送失败";
                if (msg) {
                  this.notifyError(msg);
                }
              }
            })
            .catch((e) => {
              this.notifyError("发送失败！");
            });
        },
      },
    };
  }
}
</script>

<style scoped lang="less">
// .iconfont {
//   font-size: 14px;
//   font-family: PingFangSC-Regular, PingFang SC;
//   color: #61677a;
// }
// .red {
//   color: red;
// }

// .yellow {
//   color: orange;
// }

// .green {
//   color: #25c670;
// }
// // 头部
// .searchBox {
//   padding: 24px 30px;
//   background: #ffffff;
//   font-size: 16px;
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #61677a;
// }
// // .searchBox-content {
// //   display: flex;
// //   justify-content: flex-start;
// //   align-items: center;
// // }
// .content-input {
//   width: 200px;
// }
// .content-picker {
//   width: 240px;
// }
// //修改elmentui样式
// .el-form-item {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   margin-bottom: 0;
//   margin-right: 40px;
// }
// .el-form-item /deep/ .el-form-item__content {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }
// .el-date-editor /deep/ .el-range-separator {
//   line-height: 30px;
//   color: #c3cbd6;
// }
</style>

